<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Editor Test</title>
<link href="../editor/theme/base-min.css" rel="stylesheet"/>
<!--[if lt IE 8]>
<link href="../editor/theme/cool/editor-pkg-sprite-min.css" rel="stylesheet"/>
<![endif]-->
<!--[if gte IE 8]><!-->
<link href="../editor/theme/cool/editor-pkg-min-datauri.css" rel="stylesheet"/>
<!--<![endif]-->

</head>
<body>

<h1>KISSY Editor Demo</h1>

<div style="width: 90%; margin: 0 auto">
    <label for="editor">Editor Instance 1:</label>
    <p>
        <button id='destroy1'>destroy实例</button>
        <button id='recover1'>重建实例</button>
    </p>
    <textarea id="editor" tabindex="1" style="width:100%;height:400px;margin:0 auto;">
        <script>alert(1);</script>
        <p>
            我是虾米音乐
        </p>
        <p>
            111111111111111111111111
            <embed height="33" width="257" allowscriptaccess="never"
                   src="http://www.xiami.com/widget/300122_1806480/singlePlayer.swf"
                   title="Can't+Compare"
                   type="application/x-shockwave-flash"
                   wmode="transparent"/>
            1111111111111111111111
        </p>

        <p>我是音乐：</p>
        <p>
            111111111111111111111
            <object height="37"
                    align=""
                    width="165"
                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
                <param
                        value="../src/plugins/music/niftyplayer.swf?file=../src/plugins/music/betty.mp3"
                        name="movie"/>
                <param value="high" name="quality"/>
                <param name="wmode" value="transparent"/>
                <param value="#FFFFFF" name="bgcolor"/>
                <embed height="37"
                       align=""
                       wmode="transparent"
                       width="165"
                       pluginspage="http://www.macromedia.com/go/getflashplayer"
                       swliveconnect="true"
                       type="application/x-shockwave-flash"
                       bgcolor="#FFFFFF"
                       quality="high"
                       src="../src/plugins/music/niftyplayer.swf?file=../src/plugins/music/betty.mp3">
                </embed>
            </object>
            1111111111111111
        </p>
        <p> 1 2 3 4 5 6 7 78 <a href="http://www.g.cn">我是google</a> 1 1 1 12234 3 45</p>
        <p>我是段落 <span style="background-color: red;"> 我是段落 我是段落 </span> 我是段落 <img src="http://img05.taobaocdn.com/tps/i5/T117hGXndsXXXXXXXX-15-13.gif"> 我是段落 我是段落 </p>  <p> 我是段落 我是段落 <br></p>
        <p>我是图片 <img style="width: 470px; height: 150px;"
                     src="http://img02.taobaocdn.com/tps/i2/T1xjtKXmtrXXXXXXXX-470-150.jpg"
                     alt=""></p>


        <p>我是视频优酷</p>
        <p>
            11111111111111111111
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="400" width="480">
                <param name="quality" value="high"/>
                <param name="wmode" value="transparent"/>
                <param name="movie" value="http://player.youku.com/player.php/sid/XMjA0MTgwMjIw/v.swf"/>
                <embed height="400"
                       wmode="transparent"
                       pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://player.youku.com/player.php/sid/XMjA0MTgwMjIw/v.swf" type="application/x-shockwave-flash" width="480"/>

            </object>
            1111111111111111111
        </p>

        <p>我是表格，支持右键</p>
        <table style="width: 200px;" border="1" cellpadding="1" cellspacing="1">
            <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3 <span>3.1</span> 3.2 <span>3.3</span></td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            </tbody>
        </table>

        <p>我是段落 <span style="background-color: red;"> 我是段落 我是段落 </span> 我是段落 <img src="http://img05.taobaocdn.com/tps/i5/T117hGXndsXXXXXXXX-15-13.gif"> 我是段落 我是段落 </p>  <p> 我是段落 我是段落 <br></p>

        <p>我是flash：</p>
        <p>
            11111111111111
            <object class="holiday-logo"
                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    height="68" width="300">
                <param name="movie"
                       value="http://img01.taobaocdn.com/tps/i1/T12MVIXfVNXXXXXXXX.swf"/>
                <param name="wmode" value="transparent"/>
                <object class="holiday-logo"
                        data="http://img01.taobaocdn.com/tps/i1/T12MVIXfVNXXXXXXXX.swf"
                        height="68" name="holiday-logo"
                        type="application/x-shockwave-flash"
                        width="300">
                    <param name="wmode"
                           value="transparent"/>
                    <a href="http://www.taobao.com/"
                       style="height: 43px; margin-left: 56px;" target="_top">
                        淘宝网
                        <img alt="淘宝网" height="110" src="http://www.taobao.com/"
                             title="Taobao.com - 阿里巴巴旗下网站" width="167"/>
                    </a>
                </object>
            </object>
            111111111111
        </p>
        <ul>
            <li> 我是列表1</li>
            <li> 我是列表2
                <ul>
                    <li><p>我是列表2.1</p></li>
                    <li> 我是列表2.2</li>
                    <li> 我是列表2.3</li>
                </ul>
            </li>
            <li> 我是列表3</li>
        </ul>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <ul>
            <li> 我是列表1</li>
            <li> 我是列表2
                <ul>
                    <li><p>我是列表2.1</p></li>
                    <li> 我是列表2.2</li>
                    <li> 我是列表2.3</li>
                </ul>
            </li>
            <li><p>我是列表3</p></li>
        </ul>

        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </textarea>

</div>

<div style="width: 60%; margin: 50px auto">
    <label for="editor2">Editor Instance 2:</label>
    <textarea id="editor2" style="width:100%;height:400px;margin:0 auto;"></textarea>

</div>


<script src="../kissy-min.js"></script>
<script src="../uibase-min.js"></script>
<script src="../dd-min.js"></script>
<script src="../component-min.js"></script>
<script src="../overlay-min.js"></script>

<script src="../editor/editor-all-pkg-min.js?t=20101223a"></script>
<script src="../editor/biz/ext/editor-plugin-pkg-min.js?t=20101223a"></script>
<script>


KISSY.ready(function(S) {
    // just for test
   

    S.use('editor', function() {

        var KE = S.Editor;
       
        //编辑器内弹窗 z-index 底限，防止互相覆盖
        KE.Config.baseZIndex = 10000;

        var cfg = {
            attachForm:true,
            baseZIndex:10000,
            //自定义样式
            //customStyle:"p{color:purple;}",
            //自定义外部样式
            //customLink:["http://localhost/customLink.css","http://xx.com/y2.css"],
            //是否一开始自动聚焦
            //focus:true,
            pluginConfig: {
                "image":{
                    upload:{
                        serverUrl:"/code/upload/web/upload.jsp",
                        serverParams:{
                            waterMark:function() {
                                return S.one("#ke_img_up_watermark_1")[0].checked;
                            }
                        },
                        surfix:"png,jpg,jpeg,gif",
                        fileInput:"Filedata",
                        sizeLimit:1000,//k
                        extraHtml:"<p style='margin-top:10px;'><input type='checkbox' id='ke_img_up_watermark_1' checked='checked'> 图片加水印，防止别人盗用</p>"
                    }
                },
                "flash":{
                    defaultWidth:"300",
                    defaultHeight:"300"
                },
                "templates": [
                    {
                        demo: "模板1效果演示html"  ,
                        html: "<div style='border:1px solid red'>模板1效果演示html</div><p></p>"
                    },
                    {
                        demo: "模板2效果演示html",
                        html: "<div style='border:1px solid red'>模板2效果演示html</div>"
                    }
                ],
                "font-size":{
                    items:[
                        {
                            value:"14px",
                            attrs:{
                                style:'position: relative; border: 1px solid #DDDDDD; margin: 2px; padding: 2px;'
                            },
                            name:"" +
                                    " <span style='font-size:14px'>标准</span>" +
                                    "<span style='position:absolute;top:1px;right:3px;'>14px</span>"
                        },
                        {
                            value:"16px",
                            attrs:{
                                style:'position: relative; border: 1px solid #DDDDDD; margin: 2px; padding: 2px;'
                            },
                            name:"" +
                                    " <span style='font-size:16px'>大</span>" +
                                    "<span style='position:absolute;top:1px;right:3px;'>16px</span>"
                        },
                        {
                            value:"18px",
                            attrs:{
                                style:'position: relative; border: 1px solid #DDDDDD; margin: 2px; padding: 2px;'
                            },
                            name:"" +
                                    " <span style='font-size:18px'>特大</span>" +
                                    "<span style='position:absolute;top:1px;right:3px;'>18px</span>"
                        },
                        {
                            value:"20px",
                            attrs:{
                                style:'position: relative; border: 1px solid #DDDDDD; margin: 2px; padding: 2px;'
                            },
                            name:"" +
                                    " <span style='font-size:20px'>极大</span>" +
                                    "<span style='position:absolute;top:1px;right:3px;'>20px</span>"
                        }
                    ],
                    width:"115px"
                },
                //"font-family":false,
                //"font-bold":false,
                // "font-italic":false,
                //"font-underline":false,
                //"font-strikeThrough":false,
                "multi-upload":{
                    serverUrl:"/code/upload/upload.jsp",
                    serverParams:{
                        waterMark:function() {
                            return S.one("#ke_img_up_watermark_2")[0].checked;
                        }
                    },
                    //previewSuffix:"_60x60",
                    previewWidth:"80px",
                    sizeLimit:1000//k,
                    ,numberLimit:15,
                    extraHtml:"<p style='margin-top:10px;'>" +
                            "<input type='checkbox' " +
                            "style='vertical-align:middle;margin:0 5px;' " +
                            "id='ke_img_up_watermark_2'>" +
                            "<span style='vertical-align:middle;'>图片加水印，防止别人盗用</span></p>"
                },
                "video":{
                    urlCfg:[
                        {
                            reg:/tudou\.com/i,
                            url:"http://bangpai.daily.taobao.net/json/getTudouVideo.htm?" +
                                    "url=@url@&callback=@callback@"//"&rand=@rand@"
                        }
                    ],
                    providers:[
                        {
                            reg:/youku\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                var m = url.match(/id_([^.]+)\.html$/);
                                if (m) {
                                    return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
                                }
                                m = url.match(/v_playlist\/([^.]+)\.html$/);
                                if (m) {
                                    return;
                                    //return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
                                }
                                return url;
                            }
                        },
                        {
                            reg:/tudou\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                return url;
                            }
                        },
                        {
                            reg:/ku6\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                var m = url.match(/show[^\/]*\/([^.]+)\.html$/);
                                if (m) {
                                    return "http://player.ku6.com/refer/" + m[1] + "/v.swf";
                                }
                                return url;
                            }
                        }/*,
                         {
                         reg:/taobaocdn\.com/i,
                         width:480,
                         height:400,
                         detect:function(url) {
                         return url;
                         }
                         }*/,
                        {
                            reg:/taobaocdn\.com/i,
                            width:480,
                            height:400,
                            detect:function(url) {
                                return url;
                            }
                        }
                    ]
                },
                music:{
                    //必须和网址url同域而不是类库同域
                    musicPlayer:KE.Config.base + "music/niftyplayer.swf"
                },
                "draft":{
                    interval:5,
                    limit:10,
                    helpHtml:  "<div " +
                            "style='width:200px;'>" +
                            "<div style='padding:5px;'>草稿箱能够自动保存您最新编辑的内容，" +
                            "如果发现内容丢失，" +
                            "请选择恢复编辑历史</div></div>"
                },
                "resize":{
                    direction:["y"]
                },

                dragupload:{
                    surfix:"png,jpg,jpeg,gif",
                    fileInput:"Filedata",
                    sizeLimit:1000,
                    serverUrl:"/code/upload/web/upload.jsp",
                    serverParams:{
                        waterMark:function() {
                            return true;
                        }
                    }
                }
            }
        };

        function test() {
            window.editor2 = KE("#editor", S.clone(cfg)).use("elementpaths," +
                    "sourcearea,preview," +
                    "checkbox-sourcearea," +
                    "templates,separator," +
                    "undo,separator," +
                    "removeformat,font,format,color,separator," +
                    "list,indent," +
                    "justify,separator,link," +
                    "image,flash," +
                    "video," +
                    "music," +
                    "xiami-music," +
                    "smiley,separator,table,resize," +
                    "draft," +
                    "multi-upload," +
                    "pagebreak,separator,maximize,dragupload");

        }

        test();
        S.one('#destroy1').on("click", function(ev) {
            ev.halt();
            editor2.destroy();
            editor2 = null;
        });
        S.one('#recover1').on("click", function(ev) {
            ev.halt();
            if (!editor2) {
                test()
            }

        });
        if (false)
            KE("#editor2", {
                disableObjectResizing:true,
                disableInlineTableEditing:true
            }).use("undo,font,image,music");
    });
});

</script>
</body>
</html>